<template>
  <el-calendar v-model="val" class="calendar">
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <template slot="dateCell" slot-scope="{date, data}">
      <p class="box" :class="vals.includes(data.day)?'is-selected':''" @click="onChange(data)">
        {{date.getDate()}} {{ vals.includes(data.day) ? '✔️' : ''}}
      </p>
    </template>
  </el-calendar>
</template>
<script>
function getLastDayOfMonth() {
  const now = new Date();
  const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
  const lastDay = new Date(nextMonth - 1);
  return lastDay.getDate();
}

export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.vals = val.split(",");
        } else {
          this.vals = [];
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      val: new Date(),
      vals: [],
    };
  },
  methods: {
    onChange(data) {
      if (this.vals.includes(data.day)) {
        this.vals = this.vals.filter((item) => item !== data.day);
      } else {
        this.vals.push(data.day);
      }
      this.formatDate(this.vals);
    },
    formatDate(dates) {
      if (dates && dates.length) {
        const arr = dates.sort((a, b) => new Date(a) - new Date(b));
        this.$emit("input", arr.join(","));
      }else{
        this.$emit("input", "");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}
.box {
  width: 100%;
  height: 100%;
}

.calendar {
  border: 1px solid #ebeef5;
  border-radius: 5px;
}
::v-deep {
  .el-calendar-table thead th {
    padding: 0;
  }
  .el-calendar-table td {
    vertical-align: middle;
  }
  .el-calendar-table .el-calendar-day {
    height: 40px;
    padding: 0;
    text-align: center;
    line-height: 40px;
  }
}
</style>
